<template>
  <ToDoHeader @addTodo="addTodo"></ToDoHeader>
  <ToDoMain :list="showList" @delTodo="delTodo"></ToDoMain>
  <ToDoFooter :lastLength="lastLength" :status="status" @updateStatus="updateStatus" @clearCompleted="clearCompleted"></ToDoFooter>

</template>



  <script setup>
  import ToDoHeader from "./components/ToDoHeader.vue"
  import ToDoMain from './components/ToDoMain.vue'
  import ToDoFooter from'./components/ToDoFooter.vue'
  import { ref,computed } from "vue"
  const list = ref([
    {
      id:1,
      name:"北京",
      done:false
    },
    {
      id:2,
      name:"天津",
      done:true
    }
  ])
 const addTodo = (name) => {
    list.value.push({name , done: false ,id: ~~(Math.random()*1000)})
  }
  const delTodo = (id) => {
    list.value = list.value.filter(item => item.id !== id)
  }

  const lastLength = computed(() => {
    return list.value.filter(item => !item.done).length
  })

  const status = ref('all')
  const showList = computed(() => {
    if(status.value === 'active'){
      return list.value.filter(item => !item.done)
    }else if(status.value === 'completed'){
      return list.value.filter(item => item.done)
    }else{
      return list.value
    }
  })
  const updateStatus = (newStatus) => {
    status.value = newStatus
  }

  const clearCompleted = () => {
    list.value = list.value.filter(item => !item.done)
    list.value = list.value.filter(item => item.done)
  }
  </script>